import React, {
    Component
} from 'react'
import {
    observer
} from 'mobx-react';
import {
    Icon,
    Avatar,
    WhiteSpace,
} from "weaver-mobile";
const portraitDefalut = '/messager/images/icon_m_wev8.jpg';

@observer
export default class Header extends Component {
    handleAvatarClick = (url) => {
        if (!window.em.checkJsApi('previewImage')) return;

        window.em.previewImage({
            current: url,
            urls: [url]
        });
    }

    render() {
        const {
            store
        } = this.props;
        const {
            resourceInfo: {
                headerInfo
            },
            isAvatarShow,
            userId,
            hasSexIcon,
        } = store;
        if (headerInfo == null)
            return <div></div>

        const url = isAvatarShow ? headerInfo.messagerurl.value : portraitDefalut;
        return (
            <div>
                <div className='items'>
                    <div className='header'>
                        <div className='info'>
                            <div className='graphic' onClick={() => this.handleAvatarClick(url)}>
                                {/* <Avatar name={headerInfo.lastname.value} url={url} /> */}
                                <Avatar userId={userId} />
                            </div>
                            <div className='resourceInfo'>
                                <div className='lastName'>
                                    <div className='lastName-item'>{headerInfo.lastname.value}</div>
                                    {
                                        headerInfo.workcode.value && (
                                            <div className='lastName-item lastName-item-workcode'>{`(${headerInfo.workcode.value})`}</div>
                                        )
                                    }
                                    {
                                      hasSexIcon && (
                                            <React.Fragment>
                                                <div className={`lastName-item ${headerInfo.sex.sex === '0' ? 'lastName-blue' : 'lastName-pink'}`}>
                                                    <Icon type={headerInfo.sex.sex === '0' ? 'gender-man' : 'gender-women'} size='xs' style={{marginTop: '3px'}}/>
                                                </div>
                                                <div className='lastName-item lastName-item-short'>{headerInfo.sex.value}</div>
                                             </React.Fragment>
                                        )
                                    }

                                </div>
                                <div className='depInfo' dangerouslySetInnerHTML={{__html: headerInfo.orginfo.value}}>
                                </div>
                            </div>
                            <div className='clear'></div>
                        </div>
                    </div>
                </div>
                <WhiteSpace size='md'/>
            </div>
        )
    }
}